<template>
  <div class="loginBox">
    <van-icon name="cross" class="backicon" @click="tobalck" />
    <div class="fonticon">
      <img src="../assets/images/login.jpg" alt="" />
    </div>
    <div class="prompt" style="margin: 16px" v-show="!logined">
        <span>Welcome to Dreame</span>
    </div>
    <div class="prompt agreement" v-show="!logined">
      <span>Unregistered accounts are automatically created after login</span>
    </div>
    <div class="formconent">
      <van-form @submit="onSubmit">
        <van-field
          style="margin-bottom: 10px"
          v-model="username"
          name="username"
          label="username"
          clearable
          center
          left-icon="friends-o"
          placeholder="Please enter the username"
          :rules="[{ required: true, message: 'Please enter the username' }]"
        >
        </van-field>

        <van-field
          style="margin: auto"
          v-model="password"
          :type="logined ? 'password' : 'text'"
          name="password"
          clearable
          center
          label="password"
          left-icon="lock"
          placeholder="Please enter the password"
          :rules="[{ required: true, message: 'Please enter the password' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">
            {{ logined ? '' : 'Register and' }} login</van-button
          >
        </div>
      </van-form>
    </div>
    <van-divider
      :style="{
        color: '#646566',
        borderColor: '#646566',
        padding: '0 70px',
        marginTop: '10px',
      }"
    >
      Reading for Health
    </van-divider>
  </div>
</template>

<script>
import { checkusername, login, register } from '@api/login';
export default {
  props: ['reader'],
  data() {
    return {
      username: '',
      password: '',
      logined: false,
    };
  },
  async created() {
    if (localStorage.getItem('userPD')) {
      this.logined = true;
      this.username = JSON.parse(localStorage.getItem('userPD')).username;
      this.password = JSON.parse(localStorage.getItem('userPD')).password;
    } else {
      this.username = await this.getuser(this.randomuser(3));
      this.password = this.randomuser(3);
    }
  },
  methods: {
    focusFun() {},
    async onSubmit(values) {
      console.log(values, '注册');
      // console.log('submit', values);
      //
      let result = await this.$store.dispatch('login', values);
      //   发现没有 注册 就顺便注册
      // result 如果是登录成功 默认是 undefinde
      console.log('注册', result);
      if (result.code == 20000) {
        this.$Toast('Welcome');
        this.$props.reader
          ? this.$emit('isshow')
          : this.$router.replace({ name: 'home' });
      } else {
        this.$Toast('Welcome');
      }
    },
    tobalck() {
      this.$props.reader ? this.$emit('isshow') : this.$router.back();
    },
    //
    randomuser(randomLength) {
      let idStr = Date.now().toString(36);
      idStr += Math.random().toString(36).substring(2, 3);
      return idStr;
    },

    //  确定用户名绝对不冲突
    async getuser(username) {
      let result = await checkusername({ username });
      if (result.code != 20000) {
        return await this.getuser(this.randomuser(3));
      } else {
        return username;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.loginBox {
  width: 100%;
  position: relative;
  // background: url(../assets/images/back.jpg);
  background-color: #fff;
  background-size: 100% 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-attachment: fixed;

  .backicon {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgb(83, 81, 81);
  }

  .formconent {
    width: 100%;
    height: 8.5rem;
    margin-top: 1rem;

    .van-button--block {
      margin: auto;
      width: 80%;
      background-color: rgb(187, 18, 18);
      border: none;
    }
  }
}

.van-form {
  .van-field {
    background-color: rgb(246, 246, 246);
    border-radius: 1rem;
    border-color: red;
    width: 90%;
    margin: auto;
  }
}

.prompt {
  font-size: 0.6rem;
  font-weight: 800;
  color: rgb(0, 0, 0);
  text-align: center;
}

.agreement {
  display: flex;
  font-size: 0.4rem;
  font-weight: 100;
  color: rgb(39, 37, 37);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.fonticon {
  margin-top: 2rem;
  display: flex;

  img {
    width: 8rem;
    height: 5rem;
    margin: auto;
  }
}
</style>
